<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,ul,li{
            margin: 0;
            padding: 0;
        }
        body{
            background: #c6c6c6;
        }
        ul{
            list-style: none;
        }
        .container{
            width: 1200px;
            margin: 0 auto;
        }
        #ul1{
            width: 200px;
            background: #fff;
            margin-top: 30px;
            position: relative;
        }
        #ul1 li{
            line-height: 40px;
            height: 40px;
            
            
        }
        
        #ul1 a{
            width: 169px;
            color: #333;
            font-size: 14px;
            text-decoration: none;
            padding-left: 30px;
            border: 1px solid transparent;
            border-right-color:transparent;
            position: absolute;
            line-height: 32px;
            z-index: 0;

        }
        #ul1 a:hover,#ul1 a.on{
            color: #f00; 
            border-color: #f60;
            border-right-color: #fff;
            z-index: 5;
        }
        #ul1 div{
            position: absolute;
            left: 200px;
            top: 0;
            width: 500px;
            height: 500px;
            overflow: hidden;
            background: #fff;
            /* display: none; */

        }
        #ul1 div>p{
            padding: 0 10px;
            width: 380px;
        }

    </style>
</head>

<body>
    <div class="container">
    <ul id="ul1">
        <li>
            <a href="#">家用的电器</a>
            <div><p>好的好的好的好的好的好的好的好的好的好的好的好的好的好的00000000000000000000</p></div>
        </li>
        <li>
            <a href="#">家用的电器</a>
            <div><p>好的好的好的好的好的好的好的好的好的好的好的好的好的好的111111111111111</p></div>
        </li>
        <li>
            <a href="#">家用的电器</a>
            <div><p>好的好的好的好的好的好的好的好的好的好的好的好的好的好的2222222222222222222</p></div>
        </li>
        <li>
            <a href="#">家用的电器</a>
            <div><p>好的好的好的好的好的好的好的好的好的好的好的好的好的好的3333333333333333333333333</p></div>
        </li>
        <li>
            <a href="#">家用的电器</a>
            <div><p>好的好的好的好的好的好的好的好的好的好的好的好的好的好的44444444444444444444444</p></div>
        </li>
        <li>
            <a href="#">家用的电器</a>
            <div><p>好的好的好的好的好的好的好的好的好的好的好的好的好的好的55555555555555555555</p></div>
        </li>
        <li>
            <a href="#">家用的电器</a>
            <div><p>好的好的好的好的好的好的好的好的好的好的好的好的好的好的666666666666666666666</p></div>
        </li>
        <li>
            <a href="#">家用的电器</a>
            <div><p>好的好的好的好的好的好的好的好的好的好的好的好的好的好的77777777777777777</p></div>
        </li>
        <li>
            <a href="#">家用的电器</a>
            <div><p>好的好的好的好的好的好的好的好的好的好的好的好的好的好的8888888888888888888</p></div>
        </li>
        <li>
            <a href="#">家用的电器</a>
            <div><p>好的好的好的好的好的好的好的好的好的好的好的好的好的好的9999999999999999</p></div>
        </li>
        <li>
            <a href="#">家用的电器</a>
            <div><p>好的好的好的好的好的好的好的好的好的好的好的好的好的好的JJJJJJJJJJJJJJJJJJJ</p></div>
        </li>
        <li>
            <a href="#">家用的电器</a>
            <div><p>好的好的好的好的好的好的好的好的好的好的好的好的好的好的QQQQQQQQQQQQQQQQ</p></div>
        </li>
    </ul>
</div>
<script src="js/jquery.js"></script>
    <script>
        /* 遍历a标签 */
        $('#ul1 a').each(function(i,v){
            //设置鼠标事件
         $(this).on('mouseover',function(){
             console.log($(this))
             /* 设置鼠标放上时取消所有a标签属性 */
            $('a').css('border', '0px solid #f60').removeClass('on')
            //鼠标放在哪个a标签上就给哪个添加属性
            $(this).css('border', '1px solid #f60').addClass('on')
            $('li div').hide()
            $(this).next().fadeIn().css('border', '1px solid #f60')
            }) 
        });

</script>

</body>

</html>